<template>
  <el-dialog
      :title="isEdit ? '编辑活动' : '添加活动'"
      v-model="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="活动名称" prop="actionName">
        <el-input v-model="form.actionName" placeholder="请输入活动名称"/>
      </el-form-item>
      <el-form-item label="活动内容" prop="actionContext">
        <el-input
            v-model="form.actionContext"
            type="textarea"
            :rows="8"
            placeholder="请输入活动内容"
        />
      </el-form-item>
      <el-form-item label="活动时间" prop="actionTime">
        <el-date-picker
            :key="datePickerKey"
            v-model="form.actionTime"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
            :locale="zhCn"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, computed, watch} from 'vue'
import {ElMessage} from 'element-plus'
import type {FormInstance} from 'element-plus'
import type {Action} from '@/types/action'
import {addAction, updateAction} from '@/api/action'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const props = defineProps<{
  modelValue: boolean
  action?: Action
  isEdit: boolean
  communityId: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}>()

const formRef = ref<FormInstance>()
const loading = ref(false)

const datePickerKey = ref(0)

watch(
    () => props.modelValue,
    (visible) => {
      if (visible) {
        datePickerKey.value += 1
      }
    }
)

// 表单数据
const form = ref({
  id: undefined as number | undefined,
  communityId: undefined as number | undefined,
  actionName: '',
  actionContext: '',
  actionTime: ''
})

// 表单验证规则
const rules = {
  actionName: [{required: true, message: '请输入活动名称', trigger: 'blur'}],
  actionContext: [{required: true, message: '请输入活动内容', trigger: 'blur'}],
  actionTime: [{required: true, message: '请选择活动时间', trigger: 'change'}]
}

// 重置表单方法
const resetForm = () => {
  form.value = {
    id: undefined,
    communityId: props.communityId,
    actionName: '',
    actionContext: '',
    actionTime: ''
  }
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
  resetForm()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true
    const actionData = {
      ...form.value,
      id: form.value.id || 0,
      communityId: form.value.communityId || 0
    }

    if (props.isEdit) {
      await updateAction(actionData)
    } else {
      await addAction(actionData)
    }

    ElMessage.success(props.isEdit ? '更新成功' : '添加成功')
    emit('success')
    dialogVisible.value = false
  } catch (error) {
    console.error('表单提交失败:', error)
  } finally {
    loading.value = false
  }
}

// 计算属性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 监听器
watch(
    () => props.action,
    (newVal) => {
      if (newVal) {
        form.value = {
          id: newVal.id,
          communityId: newVal.communityId,
          actionName: newVal.actionName,
          actionContext: newVal.actionContext,
          actionTime: newVal.actionTime
        }
      } else {
        resetForm()
      }
    },
    {immediate: true, deep: true}
)
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 